<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <link href="{:__CSS__}mui.min.css" rel="stylesheet" />
        <link href="{:__CSS__}mui.indexedlist.css" rel="stylesheet" />
        <script type="text/javascript" src="{:__JS__}jquery-1.11.3.js"></script>
        <style>
            html,
            body {
                height: 100%;
                overflow: hidden;
            }
            .mui-bar {
                -webkit-box-shadow: none;
                box-shadow: none;
            }
            .nowAdress{
                padding-left: 12px;
                padding-top: 5px;
                line-height: 25px;
                box-sizing: border-box;
                position: relative;
            }
            .nowAdress span:nth-child(1){
                background: url(../../../Public/images/adress.svg) no-repeat center center;
                display: inline-block;
                width: 20px;
                height: 20px;
                background-size: 20px 20px;
                margin: 0 auto;
                position: absolute;
                left: 10px;
                top: 10px;
            }
            .nowAdress img{
                display: block;
                margin: 0 auto;
                width: 20px;
                height: 20px;
            }
			#address{
				border:1px solid #ccc;
				display:inline-block;
				padding:5px 8px;
				margin-top:8px;
				background:#fff;
			}
			#address>a{
				color:#333;
			}
        </style>
    </head>

    <body>
        <div class="mui-content">
            <div id='list' class="mui-indexed-list">
                <div class="mui-indexed-list-search mui-input-row mui-search">
                    <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索城市">
                </div>
                <p class="nowAdress">当前城市<br> <span id="address">暂时无法定位</span></p>
                <div class="mui-indexed-list-bar">
                    
                    <foreach name="data" item="v" key="k">
                        <a>{$k}</a>
                    </foreach>

                </div>
                <div class="mui-indexed-list-alert"></div>
                <div class="mui-indexed-list-inner">
                    <div class="mui-indexed-list-empty-alert">没有数据</div>
                    <ul class="mui-table-view">
                        <foreach name="data" item="v" key="k">
                            <li data-group="{$k}" class="mui-table-view-divider mui-indexed-list-group">{$k}</li>
                         <foreach name="v" item="v1" key="k1">
                            <li data-value="{$v1.english}{$v1.areaname}" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item">{$v1.areaname}</li>
                         </foreach>
                        </foreach>

                    </ul>
                </div>
            </div>
        </div>
        <script src="{:__JS__}mui.min.js"></script>
        <script src="{:__JS__}mui.indexedlist.js"></script>
        <script type="text/javascript" charset="utf-8">
            mui.init();
            mui.ready(function () {
                var list = document.getElementById('list');
                //calc hieght
                list.style.height = (document.body.offsetHeight+15) + 'px';
                //create
                window.indexedList = new mui.IndexedList(list);
            });
            
            var li = $('.mui-indexed-list-item');
            li.on("click",function(){
            	sessionStorage.setItem("area",$(this).html());
            	location.href="http://" + window.location.host + "/index/index?area="+$(this).html();
            })
			$("#address").on("click",function(){
				console.log($(this).children().html());
				sessionStorage.setItem("area",$(this).children().html());
            	location.href="http://" + window.location.host + "/index/index?area="+$(this).children().html();
			})
        </script>
        <script type="text/javascript">
            var url = "{:IMG_SERVER}";
            var lat = "";
            var lng = "";
        </script>
        <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
        <script>
            var url = "{:APP_PATH}";
            //var juli = {$juli};

            wx.config({
                //debug:  true,
                appId: '{$signPackage.appId}',
                timestamp: '{$signPackage.timestamp}',
                nonceStr: '{$signPackage.nonceStr}',
                signature: '{$signPackage.signature}',
                jsApiList: [
                    'checkJsApi',
                    'openLocation',
                    'getLocation'
                ]
            });
            /*
             *  注意：
             *  1.  所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
             *  2.  如果发现在  Android  不能分享自定义内容，请到官网下载最新的包覆盖安装，Android  自定义分享接口需升级至  6.0.2.58  版本及以上。
             *  3.  完整  JS-SDK  文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
             *
             *  如有问题请通过以下渠道反馈：
             *  邮箱地址：weixin-open@qq.com
             *  邮件主题：【微信JS-SDK反馈】具体问题
             *  邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
             */
            wx.ready(function () {
                //  1  判断当前版本是否支持指定  JS  接口，支持批量判断
                wx.checkJsApi({
                    jsApiList: [
                        'getLocation'
                    ],
                    success: function (res) {
                        if (res.checkResult.getLocation == false) {
                            alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
                            return;
                        }
                    }
                });
                wx.getLocation({
                    type: 'gcj02',
                    success: function (res) {
                        var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                        var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                        var speed = res.speed; // 速度，以米/每秒计
                        var accuracy = res.accuracy; // 位置精度

                        /* var dq = getDisance(lat, lng, latitude, longitude);
                         if (dq > juli) {
                         layer.open({
                         content: '当前不在签到范围内',
                         btn: '确定',
                         yes: function (index) {
                         $(".sign-box .swai,.sign-box .snei").addClass("nobot");
                         $("#selectfiles").removeAttr("id");
                         $("input[type='file']").attr("disabled", "disabled")
                         layer.close(index);
                         }
                         });
                         }*/
                        get_address(latitude, longitude)
                    },
                    cancel: function (res) {
                        alert('用户拒绝授权获取地理位置');
                    }
                });
                wx.error(function (res) {
                    alert(res.errMsg);
                });
            });
            function get_address(lat, lng) {
			     var url = 'http://restapi.amap.com/v3/geocode/regeo?output=json&location=' + lng + ',' + lat + '&key=22f9022b217b7d764f5befb4aa74456f&radius=1000&extensions=all&callback=renderOption';
                $.ajax({
                    type: "post",
                    url: url,
                    success: function (re) {
                        $("#address").html("<a href='http://"+window.location.host+"/index/index?area="+re.regeocode.addressComponent.city+"'>"+re.regeocode.addressComponent.province+re.regeocode.addressComponent.city+"</a>");
                        console.log(re);
                    }
                })
            }
        </script>


    </body>

</html>